<template>
  <u-navbar
    title="商家入驻"
    placeholder
    titleStyle="color:black"
    leftIconColor="#000"
    auto-back
    bgColor="#FDE52F"
  >
  </u-navbar>
  <form @submit="apply_shop">
    <view class="apply">
      <view class="apply-item">
        <text>店铺名称</text>
        <input type="text" name="store_name" placeholder="请输入店铺名称" placeholder-class="classModify">
      </view>
      <view class="apply-item location">
        <text>店铺地址</text>
        <input type="text" name="address" placeholder="请输入店铺地址" placeholder-class="classModify">
      </view>
      <view class="apply-item">
        <text>经营者姓名</text>
        <input type="text" name="contacts" placeholder="请输入经营者姓名" placeholder-class="classModify">
      </view>
      <view class="apply-item" style="border: none;">
        <text>联系电话</text>
        <input type="number" name="tel" placeholder="请输入联系电话" placeholder-class="classModify">
      </view>
    </view>
    <button class="submint up-button" form-type="submit">提交申请</button>
  </form>
</template>
<script setup>

import {goodShopAPI} from "../../services";

// 申请入驻
const apply_shop = async (data) => {
  let obj = {
    store_name: data.detail.value.store_name,
    address: data.detail.value.address,
    contacts: data.detail.value.contacts,
    tel: data.detail.value.tel
  }
  console.log(data);

  if (!obj.store_name || !obj.contacts || !obj.tel || !obj.address) {
    await uni.showToast({
      title: '店铺名称、姓名、电话为必填项',
      icon: 'none',
      duration: 4000
    });
    return false;
  }
  if (obj.store_name.indexOf('xss') !== -1 || obj.address.indexOf('xss') !== -1 || obj.address.indexOf('xss') !== -1 || obj.tel.indexOf('xss') !== -1) {
    await uni.showToast({
      title: '请输入正确信息',
      icon: 'none'
    })
    return false
  }
  if (obj.store_name.indexOf('sCRipt') !== -1 || obj.address.indexOf('sCRipt') !== -1 || obj.contacts.indexOf('sCRipt') !== -1 || obj.tel.indexOf('sCRipt') !== -1) {
    await uni.showToast({
      title: '请输入正确信息',
      icon: 'none'
    })
    return false
  }
  const res = await goodShopAPI(obj)
  await uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000
  });
  setTimeout(() => {
    uni.navigateBack({delta: 2})
  }, 1600)
}
</script>
<style>
page {
  background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
page {
  background-color: #F6F6F6;
}
.up-button:after{
  border: none;
}
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FECE37, #FECE37);
}


.apply {
  margin: 20rpx auto 0;
  width: 682rpx;
  background: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
}

.apply-logo {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  border-bottom: 1rpx solid #ebeaea;
}

.apply-logo text {
  font-size: 28rpx;
  color: #222;
  display: inline-block;
  width: 30%;
  padding: 0 8rpx;
  box-sizing: border-box;
}

.apply-logo .logo_one {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.apply-logo .logo_one .upload_icon {
  width: 94rpx;
  height: 94rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(247, 248, 250, 1);
  border-radius: 4rpx;
}

.apply-logo .logo_one .upload_icon image {
  width: 36rpx;
  height: 36rpx;
}

.apply-logo .logo_one text {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}

.apply-item {
  width: 100%;
  min-height: 92rpx;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #ebeaea;
}

.apply-item text {
  font-size: 28rpx;
  color: #222;
}

.apply-item input {
  width: 70%;
  height: 92rpx;
  box-sizing: border-box;
  text-align: right;
  font-size: 28rpx;
}

.classModify {
  font-size: 28rpx;
  color: #999;
}

.location {
  position: relative;
}

/* .location input{padding-right: 18rpx;} */
.location image {
  width: 14rpx;
  height: 25rpx;
  position: absolute;
  right: 0;
}

/* 提交申请 */
.submint {
  margin-top: 44rpx;
  width: 690rpx !important;
  height: 80rpx;
  font-size: 32rpx;
  color: #fff;
  border-radius: 40rpx;
  background: linear-gradient(to left, #ffc710, #FECE37);
}
</style>
